<template>
  <div class="app-container">
      <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <el-table ref="productTable"
                :data="list"
                style="width: 100%"
                v-loading="listLoading"
                border>
        <el-table-column label="编号" width="110" align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="申请时间" width="180" align="center">
          <template slot-scope="scope">{{scope.row.createTimeStr}}</template>
        </el-table-column>
        <el-table-column label="内容" align="center">
          <template slot-scope="scope">{{scope.row.content}}</template>
        </el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template slot-scope="scope">{{scope.row.status ==2?'未读':'已读'}}</template>
        </el-table-column>
        <!--<el-table-column label="邮箱" width="150" align="center">
          <template slot-scope="scope">{{scope.row.email}}</template>
        </el-table-column>
        <el-table-column label="备注" width="100" align="center">
          <template slot-scope="scope">{{scope.row.note}}</template>
        </el-table-column> -->
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditNotice(scope.$index, scope.row)">查看详情
              </el-button>
              <!-- <el-button
                size="mini"
                type="danger"
                @click="handleDeleteNotice(scope.$index, scope.row)">删除
              </el-button> -->
          </template>
        </el-table-column>
    </el-table>
     <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[20,40,60]"
        :current-page.sync="listQuery.pageNum"
        :total="total">
      </el-pagination>
    </div>
    
  </div>
</template>
<script>
    import {
    fetchMessageList,
    updateMessageInfo,
  } from '@/api/notice'
  import {getUnredMessageSum} from '@/utils/index';
  const defaultListQuery = {
    pageNum: 1,
    pageSize: 20,
  };
  export default {
    name: "NoticeList",
    data() {
      return {
          list:[],
          listQuery:Object.assign({}, defaultListQuery),
          newForm:{//新增公告弹框里内容
            content:'',
          },
          editForm: {//编辑公告弹框里内容
            currentUId:0,
            content:'',
            // nickName:'',
            // password:'',
            // note:'',
          },
          newFormRules:{
            content:[
                { required: true,  message: '公告内容不能为空', trigger: ['blur','change']}
             ],
          },
          editFormRules:{
            content:[
                { required: true,  message: '公告内容不能为空', trigger: ['blur','change']}
             ],
            //  nickName:[
            //     { required: true,  message: '公告名不能为空', trigger: ['blur','change']}
            //  ],
          },
          currentOpeId:0,//编辑角色的当前公告id
          allRoleList:[],//所有的角色列表
          NoticeRoleId:[],//当前公告的role id
          selectedRole:[],//公告弹窗里选择的选择的role id
          isNewNoticeOpen:false,//新增公告弹窗
          isEditNoticeOpen:false,//编辑公告弹窗
          //isRoleOpen:false,//编辑角色弹窗
          total:0,
      }
    },  
    created() {
      this.getList();
     this.getUnreadMsg();
    },
    methods:{
      getUnreadMsg(){
        getUnredMessageSum().then((res)=>{
          if(res &&res.data>=0){
            this.$store.dispatch("RefreshUnreadMsgSum",res.data)
          }
        })
      },
      getList() {
        this.listLoading = true;
        fetchMessageList(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total
        }).catch((err)=>{
          console.log(err)
        });
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      handleEditNotice(index,item){
        // this.isEditNoticeOpen = true;
        // this.editForm.currentUId = item.id;
        let self = this 
        let id = 0;
        let start = item.content.indexOf('[');
        let end = item.content.indexOf(']');
        id = item.content.substring(start+1,end)
        if(item.status == 3){//已读消息
          self.$router.push({path:'/ums/salesprofit',query:{selectid:id}})
        }else{//未读消息
          updateMessageInfo(item.id).then((res)=>{
            if(res.code ==200){
              // let id = 0;
              // let start = item.content.indexOf('[');
              // let end = item.content.indexOf(']');
              // id = item.content.substring(start+1,end)
              self.$router.push({path:'/ums/salesprofit',query:{selectid:id}})
            }
            
          })
        }
        
        
        // self.$confirm('将此条消息设置为已读并且删除, 是否继续?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   updateMessageInfo(item.id).then(response => {
        //     if(response.code == 200)
        //     self.$message({
        //       type: 'success',
        //       message: '设置成功!'
        //     });
        //     self.getList();
        //   }).catch((err)=>{
        //     console.log(err)
        //   });
          
        // }).catch(() => {
                   
        // });
      },

      handleAddNotice(){
        this.isNewNoticeOpen = true;
      },
      saveNoticeInfo(){
          //console.log(this.editForm);
          let passTemp= this.editForm.password;
          if (!passTemp){
            delete this.editForm.password
          }
          //console.log(this.editForm);
        updateNoticeInfo(this.editForm.currentUId,this.editForm).then(response=>{
            this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000
            });
            this.isEditNoticeOpen=false;
            this.getList();
        });
      },
      handleUpdateRole(index,item){
        console.log(item.id);
        this.currentOpeId = item.id;
        this.getCurNoticeRole();
      },
    
      handleDeleteNotice(index,item){
          let self = this;
           self.$confirm('删除该公告, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                console.log(11);
                deleteNotice(item.id).then(response=>{
                    console.log(22)
                    if(response.code === 200){
                        self.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        self.getList();
                    }
                });
            }).catch(() => {
                // self.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
      },
      
    }
  }
</script>
<style scoped>
.btn-add{
    font-size: 14px;
    padding: 10px;
    margin-top: -8px;
  color:#fff;
  background-color:#417FF6;
}
/* 弹出框的宽度 */
.adjustmentBox >>> .el-dialog{
  width: 28rem;
} 
</style>